<template>
	<view class="">
		<Header title="单元测试-报告" :isHome="true" :isWhite='true'></Header>
		<view class="main">
			<view class="totalNum">
				<view class="total">
					<view class="totalNumTitle">
						答对
					</view>
					<view class="totalNumCon">
						{{info.correct_num}}题
					</view>
				</view>
				<view class="line">

				</view>
				<view class="total">
					<view class="totalNumTitle">
						答错
					</view>
					<view class="totalNumCon" style="color: #F54040;">
						{{info.error_num}}题
					</view>
				</view>
				<view class="line">

				</view>
				<view class="total">
					<view class="totalNumTitle">
						总分
					</view>
					<view class="totalNumCon">
						{{info.total_score}}分
					</view>
				</view>
				<view class="line">

				</view>
				<view class="total">
					<view class="totalNumTitle">
						得分
					</view>
					<view class="totalNumCon" style="color: #F54040;">
						{{info.obtain_score}}分
					</view>
				</view>
			</view>
			<view class="summarize">
				<view class="summarizeTitle">
					<image src="/static/wronglogo.png" mode="" class="wronglogo"></image>
					<view class="">
						答错总结
					</view>
				</view>
				<view class="summarizeCon" v-for="(i,idx) in info.error_summarize">
					{{idx+1}}、{{i}}
				</view>
				<!-- <view class="summarizeCon">
					1、一单元一小节共<span>20</span>题，答错<span class="wrongNumber">2</span>题
				</view>
				<view class="summarizeCon">
					1、一单元一小节共<span>20</span>题，答错<span class="wrongNumber">2</span>题
				</view> -->
				<view class="wrongTime">
					<image src="/static/wrongtime.png" mode="" class="wrongTinLogo"></image>
					<view class="">
						答卷时间：{{info.answer_time}}分钟
					</view>
				</view>
			</view>
			<view class="studyPlan">
				<view class="studyPlanTitle">
					获取学习计划
				</view>
				<image :src="imgUrl+qrcode" mode="" class="qr" @click="handleLook(imgUrl+qrcode)"></image>
				<view class="qrhold">
					长按微信二维码
				</view>
				<view class="allBtn">
					<view class="save" @click="saveImg(imgUrl+qrcode)">
						保存相册
					</view>
					<view class="sendwx">
						<button class="btnfasong" :plain="true" open-type="share">
							发送微信
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				id: '',
				imgUrl: img_url,
				show: false,
				info: {},
				resultList: [],
				qrcode:'',
			}
		},
		onShareAppMessage: function() {
			const {
				info,
				code
			} = that.data;
			return {
				title: info.name,
				path: `/pages/share/index?code=${code}&uid=${wx.getStorageSync('uid')}`,
				imageUrl: info.thumbnail_url
			}
		},
		onShareTimeline: function() {
			const {
				info,
				code
			} = that.data;
			return {
				title: info.name,
				query: `code=${code}&uid=${wx.getStorageSync('uid')}`,
				imageUrl: info.thumbnail_url
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getAsreport()
			this.getQrcode()
		},
		methods: {
			getQrcode() {
				get('/system/get_contact')
					.then(res => {
						this.qrcode = res.data.qrcode
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getAsreport() {
				get('/answer_statistics/asreport?as_id=' + this.id).then(res => {
						this.info = res.data
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 32rpx;
	}

	.totalNum {
		display: flex;
		justify-content: space-between;
		padding: 45rpx;
		background-color: #fff;
		position: sticky;
		border-radius: 12rpx;

		.total {
			text-align: center;
		}

		.line {
			width: 1rpx;
			height: 60rpx;
			background-color: #f5f5f5;
		}

		.totalNumTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			margin-bottom: 10rpx;
		}

		.totalNumCon {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #222222;
		}
	}

	.summarize {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx;
		margin: 30rpx 0;

		.summarizeTitle {
			display: flex;
			align-items: center;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;

			image {
				width: 30rpx;
				height: 35rpx;
				display: block;
				margin-right: 10rpx;
			}
		}

		.summarizeCon {
			color: #222222;
			font-size: 28rpx;
			font-family: PingFangSC;
			font-weight: 400;
			margin: 10rpx 0;

			span {
				font-weight: 600;
			}

			.wrongNumber {
				color: #F54040;
			}
		}

		.wrongTime {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			display: flex;
			align-items: center;
			margin: 30rpx 0;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
				display: block;
			}
		}
	}

	.studyPlan {
		background: #FFFFFF;
		border-radius: 12rpx;
		text-align: center;
		padding-top: 40rpx;
		margin: 30rpx 0;

		.studyPlanTitle {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin-bottom: 40rpx;
		}

		.qr {
			width: 400rpx;
			height: 400rpx;
		}

		.qrhold {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 50rpx 0;
		}

		.allBtn {
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				margin-right: 20rpx;
				width: 259rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				border-radius: 48rpx;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				border: 2rpx solid #1A1A1A;
				margin-bottom: 40rpx;
			}

			.save {
				color: #1A1A1A;

			}

			.sendwx {
				background: #1A1A1A;
				color: #FFFFFF;
			}


		}
	}

	.btnfasong {
		/* 清除默认边框 */
		border: none !important;
		outline: none !important;
		/*清除默认背景 */
		background-color: transparent;
		color: #FFFFFF;

		::after {
			border: none !important;
		}
	}
</style>